<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mask {
            width:100vw;
            height:100vh;
            background:rgba(0, 0, 0, 0.27);
            position: fixed;
            top:0;
            left:0;
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <a href="http://www.baidu.com">链接</a>
    <button class="btn">按扭</button>
    <input type=text />
    <script src="js/fastclick.js"></script>
    <script src="libs/zepto/zepto.js"></script>
    <script src="libs/zepto/touch.js"></script>

    <script src="libs/zepto/event.js"></script>
    <script>
        //解决方式3
        // FastClick.attach(document.body);
        // var mask = document.querySelector('.mask');
        // mask.ontouchstart = function (e) {
            //解决方式1
            // setTimeout(function () {
            //     this.style.display = 'none';
            // }.bind(this), 300);

            
            //解决方式2
            // e.preventDefault();
            // this.style.display = 'none';

            
            // this.style.display = 'none';
        // }

        // mask.onclick = function () {
        //     this.style.display = 'none';
        // }

        //触屏单击
        // $('.mask').tap(function () {
        //     this.style.display = 'none';
        // });

        //触屏双击
        // $('.mask').doubleTap(function() {
		// 	this.style.display = 'none';
		// });


        //触屏 长按750ms触发的事件
        // $('.mask').longTap(function() {
        //     console.log("长按超过750ms");
		// 	this.style.display = 'none';
        // });

        // $('.mask').swipe(function() {
		// 	console.log("划了一下");
        //     this.style.display = 'none';
		// });

        $('.mask').swipeLeft(function() {
			console.log("左划了一下");
            this.style.display = 'none';
		});

        
    </script>
</body>
</html>